<template>
  <!-- <div class="dashboard-container">
    <div class="dashboard-text">name: {{ name }}</div>
  </div> -->

  <div class="app-container">
    <e-charts 
    class="chart"
    :option="option">
    </e-charts>

    <e-charts 
    class="chart"
    :option="option1">
    </e-charts>
  </div>
</template>

<script>


export default {
  mounted() {
    this.initChart()
	},
  methods:{
    initChart() {
      // 模拟数据更新
      setInterval(() => {
        // 更新数据
        this.chartData.push({ time: '2024-02-20', value: Math.floor(Math.random() * 100) + 200 })

        // 更新图表
        chart.setOption({
          xAxis: {
            data: this.chartData.map(item => item.time)
          },
          series: [{
            data: this.chartData.map(item => item.value)
          }]
        })
      }, 2000) // 每2秒更新一次数据
    }
  },
  
  
  data() {
    return {
      chartData: [
        { time: '2024-02-1', value: 99 },
        { time: '2024-02-2', value: 100 },
        { time: '2024-02-3', value: 111 },
        { time: '2024-02-4', value: 90 },
        { time: '2024-02-5', value: 70 },
        { time: '2024-02-6', value: 100 },
        { time: '2024-02-7', value: 103 },
        { time: '2024-02-8', value: 120 },
        { time: '2024-02-9', value: 140 },
        { time: '2024-02-10', value: 150 },
        { time: '2024-02-11', value: 110 },
        { time: '2024-02-12', value: 130 },
        { time: '2024-02-13', value: 150 },
        { time: '2024-02-14', value: 160 },
        { time: '2024-02-15', value: 170 },
        { time: '2024-02-16', value: 180 },
        { time: '2024-02-17', value: 190 },
        { time: '2024-02-18', value: 200 }
      ]
      
    };
  },
  created(){
      for (var i = 0; i < 1000; i++) {
        this.data.push(randomData());
      }
      setInterval(function () {
        for (var i = 0; i < 5; i++) {
          this.data.shift();
          this.data.push(randomData());
        }
        myChart.setOption({
          series: [
            {
              data: this.data
            }
          ]
        });
      }, 1000);
  },
  computed:{
    option(){
      return{
        xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            //数组映射 把数组映射成 data:this.data.map(d =>d.time)
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              data: [150, 230, 224, 218, 135, 147, 260],
              type: 'line'
            }
          ]
      }      
    },
    option(){
      return{
        xAxis: {
          type: 'category',
          data: this.chartData.map(item => item.time)
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: this.chartData.map(item => item.value),
          type: 'line'
        }]

      }      
    },


  }
}
</script>

<style lang="css" scoped>
  .chart{
    height: 400px;
  }
</style>
